<template>

    <div class="M_category">
        <div class="view_table">
            <el-button type="primary" class="btn_addcate" @click="addCategory">添加管理员</el-button>
            <el-table style="width: 100%;height:90%;border-radius: 0.4rem;box-shadow: 0 0 5px rgba(0, 0, 0, .15);"
                :data="adminData" stripe size="large" >
                <el-table-column label="管理员名" prop="Username" width="200" style="padding-left: 1rem;">
                </el-table-column>
                <el-table-column label="密码" prop="Password" width="200">
                </el-table-column>
                <el-table-column label="权限等级" >
                <template #default="scope">
                <div>{{scope.row.Role==1?'普通管理员':'超级管理员'}}</div>
                </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="editItem(scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="deleteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>

    <el-dialog v-model="dialogAdd">
        <h1 style="text-align:center">请输入</h1>
        <el-input v-model="dialogAdd_input_username" placeholder="用户名" />
        <el-input v-model="dialogAdd_input_password" placeholder="密码" style="margin-top:.5rem" />
        <div>
        <el-radio-group v-model="dialogAdd_input_role" style="margin-top:1.5rem" >
        <el-radio label="1" >普通管理员</el-radio>
        <el-radio label="2">超级管理员</el-radio>
        </el-radio-group>        
        </div>

        <el-button  type="primary" style="position:relative;left: 0;top: 1rem;" @click="add">确定</el-button>
    </el-dialog>




</template>

<!------------------------------>
<script setup lang="ts">

const global  = getCurrentInstance()

//Flag:编辑还是添加的key
let flag=ref<boolean>(false)
let id =ref()

//Flag:数据获取
let adminData = ref()
async function GetData() {
    // API:数据查询
    const res = await global?.proxy?.$axios.get('/v1/getalladmin')
    if (res?.data.status == 200) {
        adminData.value = res.data.data
    }
}; GetData()




//Flag:分类添加行为:只有超级管理员才能执行此操作
let dialogAdd = ref<boolean>(false)
let dialogAdd_input_username = ref<string>('')
let dialogAdd_input_password = ref('')
let dialogAdd_input_role=ref('1')
const addCategory = () => {
    dialogAdd.value = true
}
const add = () => {
    if (flag.value) {
        //@ts-ignore
    global?.proxy.$axios.put('/v1/updataadmin', {
        role: dialogAdd_input_role.value,
        id: id.value,
        username: dialogAdd_input_username.value,
        password:dialogAdd_input_password.value
    }).then((res: any) => {
        if (res.data.status == 200) {
            ElMessage.success({
                message: "更新成功",
                center:true
            })
        }
    }).finally(() => {
        dialogAdd_input_password.value = ''
        dialogAdd_input_username.value =''
        dialogAdd_input_role.value = ''
        id.value=null
        dialogAdd.value = false
        flag.value=false
    })
    return
    }
    //API:增加
    global?.proxy?.$axios.post('/v1/addadmin', {
        role:dialogAdd_input_role.value,
        username: dialogAdd_input_username.value,
        password:dialogAdd_input_password.value
    }).then((res) => {
        if (res.data.status = 200) {
            ElMessage.success({
                message: '添加成功',
                center:true
            })
        }
    }).finally(() => {
        dialogAdd.value = false
        dialogAdd_input_role.value = dialogAdd_input_username.value = dialogAdd_input_password.value = ''
        dialogAdd_input_role.value='1'
        GetData()
    })
}

//Flag:编辑行为
const editItem = (scope: any) => {
    dialogAdd_input_password.value = scope.Password
    dialogAdd_input_username.value = scope.Username
    dialogAdd_input_role.value = scope.Role
    id.value=scope.ID
    dialogAdd.value = true
    flag.value=true

}

//Flag:删除分类行为
const deleteItem = (scope: any) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
        }
    ).then(async () => {
        // API：删除
        const rep = await global?.proxy?.$axios.delete(`/v1/deleteadmin/${scope.ID}`)
        if (rep?.data?.status == 200) {
            ElMessage.success({ message: '删除成功', center: true })
            GetData()
        }
    })
}
</script>



<style scoped lang="scss">
.btn_addcate {
    margin-bottom: 1rem;
}

</style>